<template>
  <div class="InA-container">
    <div class="top">
      <div class="header">
        <span class="title"> 收入分析</span>
        <el-select placeholder="近15天">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in data"
            :key="item.value"

          ></el-option>
        </el-select>
      </div>
    </div>
    <div :body-style="{ paddingTop: '10px' }">
      <div class="container" ref="target"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "echarts";

//定义数据源
const data = ref([
  { value: "近一周", label: "近一周" },
  { value: "近15天", label: "近15天" },
  { value: "近30天", label: "近30天" },
  { value: "自定义", label: "自定义" },
]);

let mChart;
const target = ref(null);

onMounted(() => {
  mChart = echarts.init(target.value);
  renderChart();
});

const renderChart = () => {
  const options = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        shadowStyle: {
          // 阴影指示器样式设置
          width: "auto", // 阴影大小
          color: "rgba(150,150,150,0.3)", // 阴影颜色
        },
        textStyle: {
          color: "#fff",
        },
      },
    },
    // X 轴配置
    xAxis: {
      data: [
        "03-13",
        "03-14",
        "03-15",
        "03-16",
        "03-17",
        "03-18",
        "03-19",
        "03-20",
        "03-21",
        "03-22",
        "03-23",
        "03-24",
        "03-25",
        "03-26",
        "03-27",
      ],
    },
    yAxis: {
      value: "",
      axisLabel: {
        formatter: "{value}¥",
      },
    },
    series: [
      {
        name: "收入分析",
        type: "bar",
        barWidth: 10,
        // 图表的数据
        data: [4423, 1000, 240, 0, 0, 0, 1156, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        itemStyle: {
          color: "#88cb7f",
        },
      },
    ],
  };

  mChart.setOption(options);
};

</script>

<style lang="scss" scoped>
.InA-container {
  width: 100%;
  border: 1px solid #e6ebf5;
  border-radius: 4px;
  .top {
    border-bottom: 1px solid #e6ebf5;
    width: 100%;
    padding: 18px 20px;
    box-sizing: border-box;
    .header {
      .title {
        font-size: 14px;
        margin-right: 10px;
      }
      .el-select {
        width: 100px;
      }
    }
  }
  .container {
    border-top: 1px solid #e6ebf5;
    height: 300px;
  }
}
</style>
